<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <title>小普商城</title>
</head>
<body>
<canvas id="demoCanvas">
</canvas>
<button id="previewImage">查看</button>
<script type="text/javascript">
    //通过id获得当前的Canvas对象
    var canvasDom = document.getElementById("demoCanvas");
    canvasDom.width=document.body.clientWidth;
    canvasDom.height=window.screen.height-64;

    //通过Canvas Dom对象获取Context的对象
    var context = canvasDom.getContext("2d");
//    context.beginPath(); // 开始路径绘制
//    context.moveTo(20, 20); // 设置路径起点，坐标为(20,20)
//    context.lineTo(200, 200); // 绘制一条到(200,20)的直线
//    context.lineTo(400, 20);
//    context.closePath();
//    context.lineWidth = 2.0; // 设置线宽
//    context.strokeStyle = "#CC0000"; // 设置线的颜色
//    context.stroke(); // 进行线的着色，这时整条线才变得可见
    var touxiang = new Image();
    touxiang.src = "./images/showqrcode.jpg";//设置图片的路径

    touxiang.onload = function() {
        context.drawImage(touxiang,0, 0,canvasDom.width,canvasDom.width);
    };
    var image = new Image();//创建一张图片
    image.src = "./images/default_upload.png";//设置图片的路径
    image.onload = function() {
        context.drawImage(image, canvasDom.width/2-image.width/2, canvasDom.width/2-image.width/2);
    };

    //引用的canvas生成的图片地址
    var new_img_src;
    //(1)canvas转换成二进制图片
    new_img_src = canvasDom.toDataURL("image/jpg");
    //(2)通过AJAX生成图片再调用图片地址
    dataImg = new_img_src.substring(22);

    // 5.2 图片预览
    document.querySelector('#previewImage').onclick = function () {
        wx.previewImage({
//            current: dataImg,
//            urls: [
//                dataImg,
//            ]
            current: 'https://images2015.cnblogs.com/blog/641365/201612/641365-20161205150513116-226289655.png',
            urls: [
                'https://images2015.cnblogs.com/blog/641365/201612/641365-20161205150513116-226289655.png',
            ]
        });
    };
//
//    function funcReadImgInfo(){
//        var imgs = [];
//        var imgObj = $(".userImg img");//这里改成相应的对象
//        for(var i=0; i<imgObj.length; i++){
//            imgs.push(imgObj.eq(i).attr('src'));
//            imgObj.eq(i).click(function(){
//                var nowImgurl = $(this).attr('src');
//                WeixinJSBridge.invoke("imagePreview",{
//                    "urls":imgs,
//                    "current":nowImgurl
//                });
//            });
//        }
//
//    }
</script>
</body>
</html>